<template>
  <div class="mine-container">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <div class="avatar">
          <van-image
            round
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            width="60"
            height="60"
          />
        </div>
        <div v-if="userStore.isLoggedIn" class="info">
          <div class="nickname">{{ userStore.userInfo?.nickname || userStore.userInfo?.username }}</div>
          <div class="points">积分: {{ userStore.userInfo?.points || 0 }}</div>
        </div>
        <div v-else class="info">
          <div class="login-btn">
            <van-button type="primary" size="small" @click="goToLogin">登录/注册</van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-card">
      <van-cell-group inset>
        <van-cell title="我的订单" is-link @click="goToOrder" />
        <van-cell title="地址管理" is-link @click="goToAddress" />
        <van-cell title="个人信息" is-link @click="goToProfile" />
        <van-cell title="积分明细" is-link @click="goToPoints" />
        <van-cell title="修改密码" is-link @click="goToChangePassword" />
      </van-cell-group>
    </div>

    <!-- 系统设置 -->
    <div class="menu-card">
      <van-cell-group inset>
        <van-cell title="清除缓存" @click="clearCache" />
        <van-cell title="关于我们" is-link @click="goToAbout" />
        <van-cell v-if="userStore.isLoggedIn" title="退出登录" @click="logout" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast, showDialog } from 'vant'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 初始化
onMounted(async () => {
  if (userStore.isLoggedIn) {
    await userStore.fetchUserInfo()
  }
})

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}

// 跳转到订单页
const goToOrder = () => {
  if (checkLogin()) {
    router.push('/order')
  }
}

// 跳转到地址管理
const goToAddress = () => {
  router.push('/address/list')
}

// 跳转到个人信息
const goToProfile = () => {
  if (checkLogin()) {
    router.push('/mine/profile')
  }
}

// 跳转到积分明细
const goToPoints = () => {
  if (checkLogin()) {
    router.push('/mine/points')
  }
}

// 跳转到修改密码
const goToChangePassword = () => {
  if (checkLogin()) {
    router.push('/mine/password')
  }
}

// 跳转到关于页面
const goToAbout = () => {
  // TODO: 关于页面
  showSuccessToast('功能开发中')
}

// 清除缓存
const clearCache = () => {
  showDialog({
    title: '清除缓存',
    message: '确定要清除本地缓存吗？',
    showCancelButton: true,
  }).then(() => {
    // 仅清除非必要缓存，保留登录信息
    localStorage.removeItem('cart')
    showSuccessToast('缓存已清除')
  })
}

// 退出登录
const logout = () => {
  showDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
    showCancelButton: true,
  }).then(() => {
    userStore.logout()
    showSuccessToast('已退出登录')
  })
}

// 检查登录状态
const checkLogin = (): boolean => {
  if (!userStore.isLoggedIn) {
    showDialog({
      title: '提示',
      message: '请先登录',
      confirmButtonText: '去登录',
    }).then(() => {
      router.push({
        path: '/login',
        query: { redirect: router.currentRoute.value.fullPath },
      })
    })
    return false
  }
  return true
}
</script>

<style scoped lang="scss">
.mine-container {
  min-height: 100vh;
  background-color: $background-color;
  padding-bottom: 50px;
}

.user-card {
  background-color: $primary-color;
  padding: $padding-lg;
  padding-top: $padding-xl;
  position: relative;
  margin-bottom: $padding-md;

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      margin-right: $padding-lg;
    }

    .info {
      color: white;

      .nickname {
        font-size: $font-size-lg;
        font-weight: 500;
        margin-bottom: $padding-xs;
      }

      .points {
        font-size: $font-size-md;
        opacity: 0.8;
      }
    }
  }
}

.menu-card {
  margin-bottom: $padding-lg;
}
</style> 